<template>
	<view class="page">
		<view class="stickert">
			<!-- 就诊人切换 -->
			<ChangePatient @sendinfo='getInfo'></ChangePatient>
			
			<!-- 状态栏 -->
			<view class="statusbar">
				<view class="status" :class="{active:statusFree==0}" @click="changesta(0)">
					待预约
				</view>
				<view class="status" :class="{active:statusFree==1}" @click="changesta(1)">
					已预约
				</view>
			</view>
		</view>
		<!-- 状态内容切换 -->
		<view class="status_content">
			<!-- 待预约 -->
			<view class="Pending_appointments" v-if="statusFree==0">
				<image style="width: 100%;text-align: center;margin-top: 100rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" v-if="pendinglists.length==0"></image>
				<view class="Pending_list" v-for="(item,index) in pendinglists" :key="index">
					<view class="lists_info">
						<view class="title">
							{{item.test_item}}
						</view>
						<view class="time">
							开单时间：{{new Date(item.applytime).getFullYear()+'-'+String(new Date(item.applytime).getMonth() + 1).padStart(2, '0')+'-'+String(new Date(item.applytime).getDate()).padStart(2, '0')+' '+String(new Date(item.applytime).getHours()).padStart(2, '0')+':'+String(new Date(item.applytime).getMinutes()).padStart(2, '0')+':'+String(new Date(item.applytime).getSeconds()).padStart(2, '0')}}
						</view>
					</view>
					<view class="Goappointment" @click="Goregister(item.register_id)">
						去预约 >
					</view>
				</view>
			</view>
			<!-- 已预约 -->
			<view class="Already_booked" v-if="statusFree==1">
				<image style="width: 100%;text-align: center;margin-top: 100rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" v-if="successlists.length==0"></image>
				<view class="booked_list" v-for="(item,index) in successlists" :key="index" @click="jumpdetail(item.register_id,item.status)">
					<view class="title_bar">
						<view class="title">
							{{item.test_item}} <text style="color:#D7D7D7;">></text>
						</view>
						<view class="status" :style="item.status=='待检查'?'background-color: rgba(230, 244, 255, 1);color: #1677FF;':item.status=='已取消'?'background-color: rgba(242, 242, 242, 1);color: rgba(170, 170, 170, 0.996078431372549);':'background-color: rgba(230, 255, 251, 1);color: #13C2C2;'">
							{{item.status}}
						</view>
					</view>
					<view class="reservationInfo">
						<view class="reservationlist">
							<view class="reservation_title">
								预约医院
							</view>
							<view class="reservation_content">
								四川省保健院南苑
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								就诊患者
							</view>
							<view class="reservation_content">
								{{item.patient}}
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								检查诊室
							</view>
							<view class="reservation_content">
								{{item.consult}}
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								预约时间
							</view>
							<view class="reservation_content" style="font-weight: 700;">
								{{item.register_time}}
							</view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="operate" v-if="item.status=='待检查'">
						<button class="ticket_changes" @click="rebook(item.register_id)">改签</button>
						<button class="ticket_changes close" @click="cancel_reservation(item.register_id)">取消预约</button>
					</view>
					
				</view>
				<!-- !-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="取消提示" content="是否确认取消预约？" @confirm="dialogConfirm"
						@close="dialogClose"></uni-popup-dialog>
				</uni-popup>
				<!-- <view class="booked_list">
					<view class="title_bar">
						<view class="title">
							双肾及肾血管彩色多普勒 <text style="color:#D7D7D7;">></text>
						</view>
						<view class="status" style="background-color: rgba(242, 242, 242, 1);color: rgba(170, 170, 170, 0.996078431372549);">
							已取消
						</view>
					</view>
					<view class="reservationInfo">
						<view class="reservationlist">
							<view class="reservation_title">
								预约医院
							</view>
							<view class="reservation_content">
								四川省保健院南苑
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								就诊患者
							</view>
							<view class="reservation_content">
								王小柯
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								检查诊室
							</view>
							<view class="reservation_content">
								CT诊室一
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								预约时间
							</view>
							<view class="reservation_content" style="font-weight: 700;">
								2020-01-01 08:30-09:30
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="booked_list">
					<view class="title_bar">
						<view class="title">
							双肾及肾血管彩色多普勒 <text style="color:#D7D7D7;">></text>
						</view>
						<view class="status" style="background-color: rgba(230, 255, 251, 1);color: #13C2C2;">
							已检查
						</view>
					</view>
					<view class="reservationInfo">
						<view class="reservationlist">
							<view class="reservation_title">
								预约医院
							</view>
							<view class="reservation_content">
								四川省保健院南苑
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								就诊患者
							</view>
							<view class="reservation_content">
								王小柯
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								检查诊室
							</view>
							<view class="reservation_content">
								CT诊室一
							</view>
						</view>
						<view class="reservationlist">
							<view class="reservation_title">
								预约时间
							</view>
							<view class="reservation_content" style="font-weight: 700;">
								2020-01-01 08:30-09:30
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const pendinglists = reactive([])
	const successlists = reactive([])
	const datas = reactive([])
	onLoad(()=>{
		
		api('/appselectpatientid',{
			userid:uni.getStorageSync('userid'),
			memberid:0
		}).then(res=>{
			// 待预约
			api('/pendingappointment',{
				patient_id:res.datas[0].patient_id
			}).then(res=>{
				res.dataes.forEach(item=>{
					if(item.status=='待预约'){
						pendinglists.push(item)
					}else{
						successlists.push(item)
					}
				})
			}).catch(err=>{
				console.log(err)
			})
			// 已预约
			
		}).catch(err=>{
			console.log(err)
		})
	})

	// 切换就诊人
	const memberid = ref(0)
	const getInfo = (data) => {
		memberid.value = data.member_id==0?0:data.member_id
		pendinglists.splice(0)
		successlists.splice(0)
		api('/appselectpatientid',{
			userid:uni.getStorageSync('userid'),
			memberid:data.member_id==0?0:data.member_id
		}).then(res=>{
			// 待预约
			api('/pendingappointment',{
				patient_id:res.datas[0].patient_id
			}).then(res=>{
				res.dataes.forEach(item=>{
					if(item.status=='待预约'){
						pendinglists.push(item)
					}else{
						successlists.push(item)
					}
				})
			}).catch(err=>{
				console.log(err)
			})
			// 已预约
			
		}).catch(err=>{
			console.log(err)
		})
	}
	
	// 缴费状态切换
	const statusFree = ref(0)
	const changesta = (sta) => {
		statusFree.value = sta
	}
	// 待预约
	const Goregister = (id) => {
		uni.navigateTo({
			url:'/pages/appointment_time/appointment_time?register_id='+id
		})
	}
	
	// 已预约中的取消预约
	const alertDialog = ref(null)
	const closeid = ref(0)
	const cancel_reservation = (id) => {
		console.log('取消预约',id)
		
		closeid.value = id
		alertDialog.value.open()
	}
	// 改签
	const rebook = (id) => {
		uni.navigateTo({
			url:'/pages/appointment_time/appointment_time?register_id='+id
		})
	}
	const dialogConfirm = () => {
		console.log('点击确认')
		pendinglists.splice(0)
		successlists.splice(0)
		api('/pendingappointmentclose',{
			register_id:closeid.value
		},'POST').then(res=>{
			statusFree.value = 1
			if(res.state==200){
				api('/appselectpatientid',{
					userid:uni.getStorageSync('userid'),
					memberid:memberid.value
				}).then(res=>{
					// 待预约
					api('/pendingappointment',{
						patient_id:res.datas[0].patient_id
					}).then(res=>{
						res.dataes.forEach(item=>{
							if(item.status=='待预约'){
								pendinglists.push(item)
							}else{
								successlists.push(item)
							}
						})
					}).catch(err=>{
						console.log(err)
					})
					// 已预约
					
				}).catch(err=>{
					console.log(err)
				})
			}
		}).catch(err=>{
			console.log(err)
		})
		alertDialog.value.close()
		uni.showToast({
			title: '取消成功',
			duration: 2000
		});
	}
	
	const dialogClose = () => {
		alertDialog.value.close()
	}
	
	// 跳转详情
	const jumpdetail = (id,status) => {
		if(status=='待检查'){
			uni.navigateTo({
				url:'/pages/Tobe_checked/Tobe_checked?register_id='+id
			})
		}else if(status=='已检查'){
			uni.navigateTo({
				url:'/pages/Checked/Checked?register_id='+id
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 0 25rpx 0;
		box-sizing: border-box;
		.stickert{
			padding-top: 26rpx;
			padding-bottom: 5rpx;
			background-color: #f2f2f2;
			z-index: 99;
			position: sticky;
			top: 88rpx;
			// 就诊人切换
			.patient{
				width: 100%;
				height: 88rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding:  0 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.peopleInfo{
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					height: 44rpx;
					.name{
						font-size: 32rpx;
					}
					.patient_card{
						color: #aaa;
						margin-left: 44rpx;
					}
				}
				.operate{
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 32rpx;
					color: #000;
					.qie{
						margin-left: 12rpx;
					}
				}
			}
			// 就诊人切换弹出层
			.popup{
				
				.popup-content {
					// display: flex;
					// flex-direction: column;
					// align-items: center;
					// justify-content: center;
					border-radius: 72rpx 72rpx 0 0;
					padding: 30rpx 45rpx 0;
					box-sizing: border-box;
					height: 804rpx;
					background-color: #fff;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					position: relative;
					.title{
						font-size: 32rpx;
						font-weight: 700;
						width: 100%;
						text-align: center;
					}
					.close{
						width: 32rpx;
						position: absolute;
						right: 45rpx;
						cursor: pointer;
						top: 38rpx;
					}
					
					.patientlists{
						margin-top: 60rpx;
						.patientlist{
							width: 660rpx;
							height: 92rpx;
							border-radius: 16rpx;
							padding: 0 30rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							background-color: rgba(230, 244, 255, 1);
							font-size: 28rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							margin-bottom: 40rpx;
							.patient_card{
								margin-left: 20rpx;
								color: #aaa;
							}
						}
					}
					.addpatient{
						width: 660rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #fff;
						background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
						background-size: cover;
						position: absolute;
						bottom: 40rpx;
					}
				}
			}
			// 状态栏
			.statusbar{
				width: 100%;
				height: 82rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				overflow: hidden;
				border-radius: 16rpx;
				margin: 30rpx 0;
				.status{
					width: 50%;
					height: 82rpx;
					line-height: 82rpx;
					text-align: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					cursor: pointer;
				}
				.active{
					background-color: rgba(22, 119, 255, 1);
					color: #fff;
				}
			}
		}
		
		// 状态内容切换
		.status_content{
			// 待预约
			.Pending_appointments{
				.Pending_list{
					width: 100%;
					height: 170rpx;
					background-color: #fff;
					border-radius: 16rpx;
					padding: 30rpx 28rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.lists_info{
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #000;
						.title{
							font-weight: 700;
						}
						.time{
							font-size: 24rpx;
							color: #aaa;
							margin-top: 26rpx;
						}
					}
					.Goappointment{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						color: #1677FF;
					}
				}
			}
			// 已预约
			.Already_booked{
				padding-bottom: 100rpx;
				.booked_list{
					// padding: 30rpx 28rpx;
					padding-top: 30rpx;
					padding-right: 36rpx;
					padding-bottom: 40rpx;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 16rpx;
					margin-bottom: 30rpx;
					.title_bar{
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						padding-left: 28rpx;
						box-sizing: border-box;
						position: relative;
						.title{
							color: #000;
							font-weight: 700;
						}
						.status{
							padding: 5rpx 11rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
							border-radius: 4rpx;
						}
					}
					.title_bar::before{
						content: '';
						width: 8rpx;
						height: 36rpx;
						background-color: rgba(22, 119, 255, 1);
						border-radius: 16rpx;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
					.reservationInfo{
						margin-top: 36rpx;
						.reservationlist{
							height: 40rpx;
							padding-left: 28rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
							color: #000;
							margin-bottom: 16rpx;
							.reservation_title{
								color: #AAAAAA;
							}
						}
					}
					.operate{
						height: 66rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						
						.ticket_changes{
							width: 186rpx;
							height: 66rpx;
							line-height: 66rpx;
							margin: 0 !important;
							background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E8%AE%B0%E5%BD%95/u2245.svg');
							background-size: cover;
							font-family: 'ArialMT', 'Arial', sans-serif;
							font-size: 24rpx;
							color: #000000;
						}
						.close{
							margin: 0 0 0 20rpx !important;
						}
					}
				}
			}
		}
	}       
</style>
